<template>
    <div class="big-box">
        <div class="head-box">
            <h3>项目案例</h3>
            <p>Project Cases</p>
        </div>
        <div class="main-box" v-loading="loading">
            <div class="project-box" v-for="(item,index) in projectList1" :key="index">
                <router-link :to="`/productdetail?id=${item.id}`">
                <div class="img-box">
                    <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route}`" alt="">
                </div>
                <div class="text">
                    <h3>{{item.name}}</h3>
                    <p>{{item.descri}}</p>
                </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import {getProductList2} from "../../../api";

    export default {
        name: "projectCase",
        data() {
            return {
                projectList1: [],//项目数据
                loading:true,//饿了么
            }
        },
        created() {
            getProductList2().then(res => {
                res.rows.forEach(item => {
                    if (item.route != null && item.productSort != 0 && item.descri != '') {
                        this.projectList1.push(item);
                        this.loading=false;
                    }
                })
            })
        },
    }
</script>

<style scoped lang="less">
    .big-box {
        margin-top: 30px;
    }

    .head-box {
        margin-bottom: 30px;

        h3 {
            text-align: center;
            font-size: 22px;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
        }

        p {
            text-align: center;
            font-size: 22px;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
            margin-top: 10px;
        }
    }

    .main-box {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        margin-left: -10px;
        margin-right: -10px;

        .project-box {
            width: 25%;
            display: block;
            min-height: 1px;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
            margin-bottom: 20px;
            -webkit-box-flex: 0;
            flex: 0 0 25%;
            box-sizing: border-box;
            .text {
                padding-bottom: 20px;
            }
            .img-box {
                overflow: hidden;

                img {
                    transition: 1s;
                    width: 100%;
                    height: 176px;
                }

                img:hover {
                    transform: scale(1.1, 1.1);
                }
            }

            h3 {
                padding: 10px 10px;
                font-size: 16px;
                color: black;
            }

            h3:hover {
                text-decoration: underline;
            }

            p {
                font-size: 13px;
                line-height: 20px;
                padding: 0 10px;
                color: #666;
                letter-spacing: 1px;
                text-align: left;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 3;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                margin: 10px 0;
            }
        }

        .project-box:hover {
            .text {
                box-shadow: 0 0 5px #ccc;
            }
        }
    }
</style>